<template>
  <div class="new_title">
    <p class="title"><i>{{ title }}</i></p>
    <p class="title1" v-if="title1">
      <span class="title_span1"> {{ title1 }} </span>
      <span class="title_span2"> {{ title2 }} </span>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    title1: {
      type: String,
      default: "",
    },
    title2: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.new_title {
  @include px2vw(padding-left, 28);
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url(~@/assets/images/newImg/title2.png);
  background-size: 100% 100%;
  text-shadow: 0px 0px 6px rgba(0, 93, 255, 0.6),
    0px 0px 1px rgba(1, 83, 246, 0.7);
  .title {
    color: rgba(217, 229, 255, 1);
    @include px2font(16);
    text-align: left;
  }
  .title1 {
    @include px2vw(padding-right, 28);
    .title_span1 {
      color: rgba(255, 255, 255, 0.6);
      @include px2font(14);
    }
    .title_span2 {
      @include px2font(20);
      color: rgba(255, 224, 77, 1);
    }
  }
}
</style>
